<script>
import '../../assets/plugins/fontawesome-free/css/all.min.css';
// <!-- 载入脚本 -->
// <!-- jQuery -->
import '../../assets/plugins/jquery/jquery.min.js';
// <!-- Bootstrap -->
import '../../assets/plugins/bootstrap/js/bootstrap.bundle.min.js';
// <!-- ChartJS -->
import '../../assets/plugins/chart.js/Chart.min.js';

export default {
  name: "indexChar",
  data(){
    return {
      numberform:{
        nowDayCGNumber:'',
        nowDayXSNumber:'',
        nowMonthCGNumber:'',
        nowMonthXSNumber:'',
        yesterDayCGNumber:'',
        yesterDayXSNumber:'',
        yesterMonthCGNumber:'',
        yesterMonthXSNumber:'',
      },
      CGList:[],
      XSList:[],
      weekList:[],
      monthCGList:[],
      monthXSList:[],
      monthList:[],
    };
  },
  methods:{
    loadPost(){
      this.$axios.post('/zzh-index/list',{}).then(res=>res.data).then(res=>{
        if(res.resultCode==200){
          this.numberform=res.data
        }else {
          alert('获取数据失败')
        }
      })
    },
    loadWeekPost(){
      this.$axios.post('/zzh-index/week',{}).then(res=>res.data).then(res=>{
        if(res.resultCode==200){
          this.CGList=res.data.CGList
          this.XSList=res.data.XSList
          this.weekList=res.data.weekList
          this.renderChart();
        }else {
          alert('获取数据失败')
        }
      })
    },
    loadMonthPost(){
      this.$axios.post('/zzh-index/month',{}).then(res=>res.data).then(res=>{
        if(res.resultCode==200){
          this.monthCGList=res.data.monthCGList
          this.monthXSList=res.data.monthXSList
          this.monthList=res.data.monthList
          this.renderMonthChart();
        }else {
          alert('获取数据失败')
        }
      })
    },
    renderChart() {
      var ctx = document.getElementById('myChart').getContext('2d');
      var myChart = new Chart(ctx, {
        type: 'line',
        data: {
          labels: this.weekList,
          datasets: [{
            label: '采购',
            data: this.CGList,
            backgroundColor: "rgba(220,220,220,0.2)",
            borderColor: "rgba(220,220,220,1)",
            pointBackgroundColor: "rgba(220,220,220,1)",
            pointBorderColor: "#fff",
            pointHoverBackgroundColor: "#fff",
            pointHoverBorderColor: "rgba(220,220,220,1)"
          },{
            label: '销售',
            data: this.XSList,
            backgroundColor: "rgba(220,220,220,0.2)",
            borderColor: "rgba(255,0,0,1)",
            pointBackgroundColor: "rgba(255,0,0,1)",
            pointBorderColor: "rgba(255,0,0,1)",
            pointHoverBackgroundColor: "rgba(255,0,0,1)",
            pointHoverBorderColor: "rgba(255,0,0,1)"
          }
          ]
        },
        options: {
          scales: {
            yAxes: [{
              ticks: {
                beginAtZero: true
              }
            }]
          }
        }
      });
    },
    renderMonthChart() {
      var ctx = document.getElementById('myMonthChart').getContext('2d');
      var myChart = new Chart(ctx, {
        type: 'line',
        data: {
          labels: this.monthList,
          datasets: [{
            label: '采购',
            data: this.monthCGList,
            backgroundColor: "rgba(220,220,220,0.2)",
            borderColor: "rgba(220,220,220,1)",
            pointBackgroundColor: "rgba(220,220,220,1)",
            pointBorderColor: "#fff",
            pointHoverBackgroundColor: "#fff",
            pointHoverBorderColor: "rgba(220,220,220,1)"
          },{
            label: '销售',
            data: this.monthXSList,
            backgroundColor: "rgba(220,220,220,0.2)",
            borderColor: "rgba(255,0,0,1)",
            pointBackgroundColor: "rgba(255,0,0,1)",
            pointBorderColor: "rgba(255,0,0,1)",
            pointHoverBackgroundColor: "rgba(255,0,0,1)",
            pointHoverBorderColor: "rgba(255,0,0,1)"
          }
          ]
        },
        options: {
          scales: {
            yAxes: [{
              ticks: {
                beginAtZero: true
              }
            }]
          }
        }
      });
    },
  },
  beforeMount() {
    this.loadPost();
    this.loadWeekPost();
    this.loadMonthPost();
  },
  mounted () {
  }
}

</script>

<template>

  <div class="wrapper">

    <!-- Preloader -->
<!--    <div class="preloader flex-column justify-content-center align-items-center">-->
<!--      <img class="animation__wobble" src="../../assets/img/AdminLTELogo.png" alt="AdminLTELogo" height="60" width="60">-->
<!--    </div>-->

    <!-- 主体内容 -->
    <section class="content">
        <div class="container-fluid">

          <!-- Info boxes -->
          <div class="row">
            <div class="col-12 col-sm-6 col-md-3">
              <div class="info-box">
                <span class="info-box-icon bg-info elevation-1"><i class="fas fa-cog"></i></span>

                <div class="info-box-content">
                  <span class="info-box-text">当日采购</span>
                  <span class="info-box-number">{{this.numberform.nowDayCGNumber}}</span>
                </div>
                <!-- /.info-box-content -->
              </div>
              <!-- /.info-box -->
            </div>
            <!-- /.col -->
            <div class="col-12 col-sm-6 col-md-3">
              <div class="info-box mb-3">
                <span class="info-box-icon bg-danger elevation-1"><i class="fas fa-thumbs-up"></i></span>

                <div class="info-box-content">
                  <span class="info-box-text">当日销售</span>
                  <span class="info-box-number">{{this.numberform.nowDayXSNumber}}</span>
                </div>
                <!-- /.info-box-content -->
              </div>
              <!-- /.info-box -->
            </div>
            <!-- /.col -->

            <!-- fix for small devices only -->
            <div class="clearfix hidden-md-up"></div>

            <div class="col-12 col-sm-6 col-md-3">
              <div class="info-box mb-3">
                <span class="info-box-icon bg-success elevation-1"><i class="fas fa-shopping-cart"></i></span>

                <div class="info-box-content">
                  <span class="info-box-text">当月采购</span>
                  <span class="info-box-number">{{this.numberform.nowMonthCGNumber}}</span>
                </div>
                <!-- /.info-box-content -->
              </div>
              <!-- /.info-box -->
            </div>
            <!-- /.col -->
            <div class="col-12 col-sm-6 col-md-3">
              <div class="info-box mb-3">
                <span class="info-box-icon bg-warning elevation-1"><i class="fas fa-users"></i></span>

                <div class="info-box-content">
                  <span class="info-box-text">当月销售</span>
                  <span class="info-box-number">{{this.numberform.nowMonthXSNumber}}</span>
                </div>
                <!-- /.info-box-content -->
              </div>
              <!-- /.info-box -->
            </div>
            <!-- /.col -->
          </div>

          <!-- Info boxes -->
          <div class="row">
            <div class="col-12 col-sm-6 col-md-3">
              <div class="info-box">
                <span class="info-box-icon bg-info elevation-1"><i class="fas fa-cog"></i></span>

                <div class="info-box-content">
                  <span class="info-box-text">昨日采购</span>
                  <span class="info-box-number">{{this.numberform.yesterDayCGNumber}}</span>
                </div>
                <!-- /.info-box-content -->
              </div>
              <!-- /.info-box -->
            </div>
            <!-- /.col -->
            <div class="col-12 col-sm-6 col-md-3">
              <div class="info-box mb-3">
                <span class="info-box-icon bg-danger elevation-1"><i class="fas fa-thumbs-up"></i></span>

                <div class="info-box-content">
                  <span class="info-box-text">昨日销售</span>
                  <span class="info-box-number">{{this.numberform.yesterDayXSNumber}}</span>
                </div>
                <!-- /.info-box-content -->
              </div>
              <!-- /.info-box -->
            </div>
            <!-- /.col -->

            <!-- fix for small devices only -->
            <div class="clearfix hidden-md-up"></div>

            <div class="col-12 col-sm-6 col-md-3">
              <div class="info-box mb-3">
                <span class="info-box-icon bg-success elevation-1"><i class="fas fa-shopping-cart"></i></span>

                <div class="info-box-content">
                  <span class="info-box-text">上月采购</span>
                  <span class="info-box-number">{{this.numberform.yesterMonthCGNumber}}</span>
                </div>
                <!-- /.info-box-content -->
              </div>
              <!-- /.info-box -->
            </div>
            <!-- /.col -->
            <div class="col-12 col-sm-6 col-md-3">
              <div class="info-box mb-3">
                <span class="info-box-icon bg-warning elevation-1"><i class="fas fa-users"></i></span>

                <div class="info-box-content">
                  <span class="info-box-text">上月销售</span>
                  <span class="info-box-number">{{this.numberform.yesterMonthXSNumber}}</span>
                </div>
                <!-- /.info-box-content -->
              </div>
              <!-- /.info-box -->
            </div>
            <!-- /.col -->

          </div>
          <!-- /.row -->

          <div class="row">
            <div class="col-md-6">
              <!-- 折线图 -->
              <div class="card card-info">
                <div class="card-header">
                  <h3 class="card-title">近七天交易折线图</h3>

                  <div class="card-tools">
                    <button type="button" class="btn btn-tool" data-card-widget="collapse">
                      <i class="fas fa-minus"></i>
                    </button>
                    <button type="button" class="btn btn-tool" data-card-widget="remove">
                      <i class="fas fa-times"></i>
                    </button>
                  </div>
                </div>
                <div class="card-body">
                  <div class="chart">
                    <canvas id="myChart" style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%;"></canvas>
                  </div>
                </div>
                <!-- /.card-body -->
              </div>
              <!-- /.card -->
            </div>

            <div class="col-md-6">
              <!-- 折线图 -->
              <div class="card card-info">
                <div class="card-header">
                  <h3 class="card-title">近七月交易折线图</h3>

                  <div class="card-tools">
                    <button type="button" class="btn btn-tool" data-card-widget="collapse">
                      <i class="fas fa-minus"></i>
                    </button>
                    <button type="button" class="btn btn-tool" data-card-widget="remove">
                      <i class="fas fa-times"></i>
                    </button>
                  </div>
                </div>
                <div class="card-body">
                  <div class="chart">
                    <canvas id="myMonthChart" style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%;"></canvas>
                  </div>
                </div>
                <!-- /.card-body -->
              </div>
              <!-- /.card -->
            </div>
          </div>
          <!-- /.row -->

        </div><!--/. container-fluid -->

      </section>

  </div>
</template>

<style scoped>
</style>